.top-enter {
  opacity: 0;
  transform: translateY(-100%);
}

.top-enter-active {
  opacity: 1;
  transform: translateY(0%);
  transition: all 300ms;
}

.top-exit {
  opacity: 1;
  transform: translateY(0%);
}

.top-exit-active {
  opacity: 0;
  transform: translateY(-100%);
  transition: all 200ms;
}

.right-enter {
  opacity: 0;
  transform: translateX(100%);
}

.right-enter-active {
  opacity: 1;
  transform: translateX(0%);
  transition: all 300ms;
}

.right-exit {
  opacity: 1;
  transform: translateX(0%);
}

.right-exit-active {
  opacity: 0;
  transform: translateX(100%);
  transition: all 200ms;
}


.bottom-enter {
  opacity: 0;
  transform: translateY(100%);
}

.bottom-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 300ms;
}

.bottom-exit {
  opacity: 1;
  transform: translateY(0);
}

.bottom-exit-active {
  opacity: 0;
  transform: translateY(100%);
  transition: all 200ms;
}

.left-enter {
  opacity: 0;
  transform: translateX(-100%);
}

.left-enter-active {
  opacity: 1;
  transform: translateX(0%);
  transition: all 300ms;
}

.left-exit {
  opacity: 1;
  transform: translateX(0);
}

.left-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 200ms;
}

.center-enter {
  opacity: 0;
  transform: scale(0.9)
}

.center-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: transform 300ms, opacity 300ms;
}

.center-exit {
  opacity: 1;
  transform: scale(1);
}

.center-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: transform 200ms, opacity 200ms;
}